<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="mystyle.css">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>风流工作室注册页面</title>
<script >
    localStorage
      function test(){
        var schoolnum=document.getElementById("schoolnum").value;
        var name=document.getElementById("name").value;
        var n=localStorage.getItem(name);
        var s=localStorage.getItem(schoolnum);
        if(n!=null||s!=null){
            alert("提示\n\n学号已被注册或用户名已被使用");
            return false;
        }
        var passward=document.getElementById("password");
        var p1=/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,16}$/;
        if(!p1.test(password.value)){
            alert("警告\n\n密码必须包含字母和数字且长度为6~18位");
            return false;
        }
        var pass=document.getElementById("password").value;
        var pass2=document.getElementById("password2").value;
        if(pass!=pass2){
            alert("警告\n\n请确认两次密码输入一致");
            return false;
        }
        var h=document.getElementById("email");
        var p2=/^[a-zA-Z0-9]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if (!p2.test(h.value)){
            alert("提示\n\n请输入正确邮箱地址");
            myreg.focus();
            return false;
        }
        var email=document.getElementById("email").value;
        var d=localStorage.getItem(email);
        if (d!=null){
            alert("提示\n\n邮箱已被使用");
            return false;
        }
        
        else{
            var data=new Object;
            data.name=document.getElementById("name").value;
            data.schoolnum=document.getElementById("schoolnum").value;
            data.password=document.getElementById("password").value;
            data.email=document.getElementById("email").value;
            var t=new Date();
            data.timenow=t.toLocaleStriloginlogin
            var ti=JSON.stringify(data);
            localStorage.setItem(data.name,ti);
            alert("注册成功");
            window.location.href = 'http://solile.gitee.io/test_pages/login.html';} 
    }
</script>
<style type="text/css">
        img {
            border-radius: 9px;
        }
    </style>
<style type="text/css">
    #passStrength{height:6px;width:120px;border:1px solid rgba(226, 226, 226, 0.56);padding:2px; }
    .strengthLv1{background:red;height:6px;width:40px;}
    .strengthLv2{background:orange;height:6px;width:80px;}
    .strengthLv3{background:green;height:6px;width:120px;}
</style>  
</head>
    <header>
        <img src="1.png"alt=风流logo width="112" height="63"class="img-polaroid">
        <em style="color:#223657;font-size:x-large">遇 见 风 流 ，约 见 更 好 的 自 己<img src="0x2728.png"></em>
    </header>
<body style="background:url(8.png)" style="text-align:center">
<nav style="text-align:right">
<canvas id="myCanvas" width="450" height="100"></canvas>
    <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="70px Arial";
    ctx.strokeText("风流",20,60);
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="22px Arial";
    ctx.fillText("工作室",149,75);
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="16px Arial";
    ctx.fillText("We are Waiting for You...",199,40);
    </script>
</nav> 
    <div class="container-fluid"> 
        <div class="row">
        <div class="span8"></div> 
    <div class="span9">        
        <article>
            <form style="font-family:'Times New Roman', Times, serif;font-size:xx-large;
            color:#1A1B1B">*SIGN UP*</form><br/> <br/>
            <b/>用户名称:<input id="name" type="text" name="username" value=""
            maxlength="13" size="30" placeholder="请取一个有个性的名字"><br/><br/>
            <b/>我邮学号:<input id="schoolnum" type="text" name="schoolnum" value="" 
            maxlength="10" size="30" placeholder="请输入10位学号"><br/><br/>
            <b/>用户密码:<input id="password" type="password" name="password" value=""
            maxlength="15" size="30" placeholder="请输入6~18位数字"> <div class="pass-wrap" ><div id="passStrength"></div></div>
            <b/>确认密码:<input id="password2" type="password" name="password2" value=""
            maxlength="15" size="30" placeholder="请确认两次密码输入一致"><br/><br/>
            <b/>邮箱地址:<input id="email" type="email" name="email" value=""
            maxlength="30" size="30" placeholder="something@example.com" ><br/><br/>
            <form style="font-size:x-small"><input type="checkbox" name="vehicle"value="read">我同意
                <a href="http://gitee.com/buptsice/training/blob/master/Readme.md" target="_blank">风流守则</a>
                <image src="0x1f43e.png"alt="风流"></form>
            <input type="submit" value="确认注册" onclick="test()">
                <a href="http://solile.gitee.io/test_pages/login.html" style="font-size:x-small">已有账户，点击登录</a>
        </article>
    <script src="js/bootstrap.min.js"></script></body>
<script type="text/javascript" charset="utf-8" src="passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('password','passStrength');
</script>
<br/><br/><br/><br/>
<footer>we are Waiting for you...</footer>
</body>
</html>